// 引入参数app的类型
import type { App } from "vue"
// 引入store仓库函数
import {useUserInfoStore} from '@/stores/userInfo'

// 引入全局组件 CategorySelector（分类选择器组件）
// import CategorySelector from '@/components/CategorySelector/index.vue'

// 无论是vue2还是vue3当中都可以给vue定义官方插件
// 定义官方插件分为两大类插件：对象式插件和函数式插件
// 对象式插件就是往外暴露一个对象，对象里面一定要有一个方法，名字叫install
// 函数式插件就是往外暴力一个函数，函数本身会作为install方法后期被调用，函数名字不需要叫install
// vue2当中一个插件，要使用必须使用Vue.use()去注册插件，声明使用插件
// 本质是在调用函数，如果是对象式插件就是调用install  如果是函数式插件就是调用这个函数

/* 对象式插件 */
// let MyPlugin = {}
// MyPlugin.install = function (Vue, options) {
//   // 1. 添加全局方法或 property
//   Vue.myGlobalMethod = function () {
//     console.log('全局方法被调用myGlobalMethod');
//   }

//   // 2. 添加全局资源
//   Vue.directive('upper', (node, bindings) => {
//     // console.log(node,bindings);
//     // 获取到元素和元素所绑定的数据
//     // 手动给元素的内容改成大写
//     node.textContent = bindings.value.toUpperCase()
//   })

    // Vue.component()
//   // 4. 添加实例方法
//   Vue.prototype.$myMethod = function (methodOptions) {
//     console.log('实例方法被调用$myMethod');
//   }
// }


/* 函数式插件  插件也可以是一个函数 */
// function MyPlugin(Vue, options) {
//   // 1. 添加全局方法或 property
//   Vue.myGlobalMethod = function () {
//     console.log('全局方法被调用myGlobalMethod');
//   }

//   // 2. 添加全局资源
//   Vue.directive('upper', (node, bindings) => {
//     // console.log(node,bindings);
//     // 获取到元素和元素所绑定的数据
//     // 手动给元素的内容改成大写
//     node.textContent = bindings.value.toUpperCase()
//   })

//   // 4. 添加实例方法
//   Vue.prototype.$myMethod = function (methodOptions) {
//     console.log('实例方法被调用$myMethod');
//   }
// }



// 自定义插件
// 这个函数会自动传入一个参数 app 参数类型为App
function isShowBtnPermission(app:App) {
  // 可以给vue添加任何的资源，包括全局指令 全局组件 全局方法 混入等等 各种资源
  // 指令名 不能带v- 而且必须全小写
  // 指令的回调会在解析指令的时候去调用，调用的时候传递的两个重要参数
  // 第一个是使用这个指令的节点  第二个是包含指令属性值的上下文对象
  // app.directive('isshow',(el,bindings) => {
  //   console.log(el);        // <button class="el-button el-button--primary el-button--default" aria-disabled="false" type="button">…</button>
  //   console.log(bindings);  // {dir: {…}, instance: Proxy(Object), value: 'btn.TryOutOne.add', oldValue: undefined, arg: undefined, …}
  //   // 如果登录以后返回的用户信息userInfo.buttons当中不包含bindings.value 则将没有的进行删除
  //   if(!useUserInfoStore().userInfo.buttons.includes(bindings.value)){
         // 通过父节点，来进行删除子节点 
  //     el.parentNode.removeChild(el)
  //   }
  // })
  // 上面的写法默认会在两个时间点去执行
  // 1、挂载完成
  // 2、更新完成 页面更新完，只有有数据更改就发生页面更改，页面只要更改上面就要执行


  app.directive('isshow',{
    mounted (el,bindings) {
      // 如果登录以后返回的用户信息userInfo.buttons当中不包含bindings.value 则将没有的进行删除
      if(!useUserInfoStore().userInfo.buttons.includes(bindings.value)){
        // 通过父节点，来进行删除子节点 
        el.parentNode.removeChild(el)
      }
    },
  })


  // 注册全局组件
  // app.component('CategorySelector',CategorySelector)
}




// 默认暴露
export default isShowBtnPermission